<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>注册页面</title>
    <!--    引入格式文件-->
    <link rel="stylesheet" href="./css/reg.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.js"></script>
</head>

<body>
    <style></style>
    <div class="rg_layout">
        <div class="rg_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        <div class="rg_center">
            <div class="rg_form">
                <form action="#" method="post">
                    <table>
                        <tr>
                            <td class="td_left"><label for="username">用户名</label></td>
                            <td class="td_right">
                                <input type="text" id="username" name="username">
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="password">密码</label></td>
                            <td class="td_right">
                                <input type="password" id="password" name="password">
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="phone">手机号</label></td>
                            <td class="td_right">
                                <input type="text" id="phone" name="phone">
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="">性别</label></td>
                            <td class="td_right" id="sex">
                                <label><input type="radio" name="sex" value="1" checked="checked">男</label>&nbsp;&nbsp;&nbsp;
                                <label><input type="radio" name="sex" value="0">女</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="">是否VIP</label></td>
                            <td class="td_right" id="vip">
                                <label><input type="radio" name="vip" value="1" checked="checked" />是</label>&nbsp;&nbsp;&nbsp;
                                <label><input type="radio" name="vip" value="0" />否</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="question">密保问题</label></td>
                            <td class="td_right">
                                <input type="text" id="question" name="question">
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="answer">密保答案</label></td>
                            <td class="td_right">
                                <input type="text" id="answer" name="answer">
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="avatar">头像</label></td>
                            <td class="td_right">
                                <input type="text" id="avatar" disabled />
                                <button>选择图片</button><input type="file" hidden />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center">
                                <input type="submit" value="立即注册" id="btn_sub" />
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div class="rg_right">
            <p>已有账号？<a href="../01-loginBaseCode/login.html">立即登录</a></p>
        </div>
    </div>
    <script>
        //设置根路径
        axios.defaults.baseURL = 'http://124.223.14.236:3001/api';
        //获取元素
        //注册按钮
        const btn = document.querySelector('#btn_sub')
            //注册点击事件
        btn.addEventListener('click', async function(e) {
            //阻止默认行为
            e.preventDefault()

            //用户名
            const username = document.querySelector('#username').value
            const password = document.querySelector('#password').value
            const phone = document.querySelector('#phone').value
            const question = document.querySelector('#question').value
            const answer = document.querySelector('#answer').value
            const arrsex = document.querySelectorAll('#sex input')
            for (let i = 0; i < arrsex.length; i++) {
                if (arrsex[i].checked) localStorage.setItem('sex', `${arrsex[i].value}`)
            }

            const sex = +localStorage.getItem('sex')


            const arrvip = document.querySelectorAll('#vip input')
            for (let i = 0; i < arrvip.length; i++) {
                if (arrvip[i].checked) localStorage.setItem('vip', `${arrvip[i].value}`)
            }
            const vip = +localStorage.getItem('vip')



            // 请求上传数据
            const {
                data: res
            } = await axios.post('/user/reg', {
                username,
                password,
                phone,
                sex,
                vip,
                question,
                answer,
            })
            console.log(res)
            alert('注册成功')
                //注册成功就跳转登陆页面
            location.href = '/01-loginBaseCode/login.html'
        })
    </script>
</body>

</html>